<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>输入框和导航组件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body style="margin: 200px;">
<!--输入框组件-->



<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
</div>
<br/>
<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">@qq.com</span>
</div>
<br/>
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>
<br/>
<div class="input-group">
    <span class="input-group-addon"><input type="checkbox"/></span>
    <input type="text" class="form-control">
</div>
<br/>
<div class="input-group">
    <span class="input-group-addon"><input type="radio"/></span>
    <input type="text" class="form-control">
</div>
<br/>
<div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button class="btn btn-default">提交</button>
    </div>
</div>
<br/>
<div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button class="btn btn-default" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="">首页</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">产品</a></li>
            <li><a href="">关于</a></li>
        </ul>
    </div>
</div>

</body>
</html>